<template>
  <div class="box_yj" ref="parent">
    <span></span>
    <div class="section-header">落实政策资金占比</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { getFunds } from '@/api/data';
export default {
	props: ['height', 'dateProp'],
	data() {
		return {
			chartsDom: null,
			jz:true,
			chartsData: {
				years: ['', '', ''],
				datas: [
					[],
					[],
					[]
				]
			}
		};
	},
	computed: {
		setStyle: {
			get() {
				return this.$refs.parent.offsetWidth;
			},
			set(val) {
				this.chartsDom = {
					width: val - 30 + 'px',
					height: this.height - 30 - 31 + 'px',
					'z-index': 100,
					position: 'relative'
					// 'background-color': 'red'
				};
			}
		}
	},
	mounted() {
		this.setStyle = this.setStyle;
		this.$nextTick(_ => {
			this.init();
		});
	},
	methods: {
		init() {
			this.jz=false
			getFunds(this.dateProp).then(({ data: { data } }) => {
				this.jz=true
				console.log(data);
				if (data && data.length > 0) {
					this.chartsData = {years: [], datas: [[], [], []]};
					for(var i=0;i<data.length;i++){
						this.chartsData.years.push(data[i].name);
						this.chartsData.datas[0].push(data[i].value[0].value);
						this.chartsData.datas[1].push(data[i].value[1].value);
						this.chartsData.datas[2].push(data[i].value[2].value);
					}
					console.log(this.chartsData);
				}else{
					
				}
				this.chartInit();
			});
		},
		chartInit() {
			let data = [['2018', 135], ['2019', 86], ['2020', 73]];

			var dateList = data.map(function(item) {
				return item[0];
			});
			var valueList = data.map(function(item) {
				return item[1];
			});
			let option = {
			    color: ['#1E90FF', '#FFD700', '#ADFF2F'],
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'shadow'
			        }
			    },
				grid:{
				    x:65,
				    y:65,
				    x2:10,
				    y2:30
				},
			    legend: {
					top:'20',
					textStyle:{
							color:['#5793f3', '#d14a61', '#cccccc']
							},
			       data: ['市场主体', '重点群体', '大学生']
			    },
			    xAxis: [
			        {
			            type: 'category',
			            axisTick: {show: false},
						axisLine:{
							lineStyle:{color:'#fff'},
						},
			            data: this.chartsData.years
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
						axisLine:{
							lineStyle:{color:'#fff'},
						},
						axisLabel: {
						 formatter:'{value}万元'
						}
			        }
			    ],
			    series: [
			        {
			            name: '市场主体',
			            type: 'bar',
			            barGap: 0,
			           data: this.chartsData.datas[0]
			        },
			        {
			            name: '重点群体',
			            type: 'bar',
			            data: this.chartsData.datas[1]
			        },
			        {
			            name: '大学生',
			            type: 'bar',
			            data: this.chartsData.datas[2]
			        }
			    ]
			};
			
			let chart = this.$echarts.init(this.$refs.charts);
			chart.setOption(option);
		}
	}
};
</script>
<style lang="stylus" scoped>
.section
	width 100%
	height 100%
	margin-top 20px
</style>
